<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 50px;
            background: rgba(47, 47, 47, 0.98);
        }

        .w {
            width: 600px;
            margin: 0 auto;
        }

       

        label {
            float: left;
            font-size: 24px;
            color: #ddd;
            line-height: 50px;
            cursor: pointer;
        }

        .title {
            width: 60%;
            float: right;
            height: 24px;
            border: none;
            text-indent: 10px;
            outline-style: none;
            margin-top: 12px;
            border-radius: 6px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
        }

        h2 {
            position: relative;
        }

        span {
            position: absolute;
            right: 0;
            top: 5px;
            height: 20px;
            border-radius: 20px;
            padding: 0 5px;
            line-height: 20px;
            background-color: #E6E6FA;
            font-size: 14px;
        }

        .s {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <header>
        <section class="w">
            
                <label for="title">Todolist</label>
                <input type="text" id="title" class="title" placeholder="输入">
                <button>1</button>
          
        </section>
    </header>
    <section class="w s">
        <h2>正在进行<span id="todocount">0</span></h2>
        <ol></ol>
    </section>
    <section class="w s">
        <h2>已经完成<span id="todocount">0</span></h2>
        <ul></ul>
    </section>
    <script>
        window.addEventListener('load', function () {

            var tit = document.querySelector("#title")
            var button = document.querySelector("button")
            draw();
            button.addEventListener('click', function (e) {
            //   localStorage.clear()
                    if (tit.value == '') {
                        alert("继续")


                    } else {
                        var local = getDate();
                        local.push({ title: tit.value, done: false })
                        saveDate(local)
                        draw()
                    }
                


            })
        })
        function getDate() {
            var data = localStorage.getItem("todolist")
            if (data) {
                return JSON.parse(data)
            } else {
                return [];
            }
        }
        function saveDate(data){
            localStorage.setItem("todolist",JSON.stringify(data))
        }
        var ul = document.querySelector("ul");
        var ol = document.querySelector("ol");
        function draw(){
            var data = getDate();
            // console.log(data);
            for(var i=0;i<ul.children.length;i++){

            ul.removeChild(ul.children[i])
            }
            for(var i=0;i<ol.children.length;i++){

            ol.removeChild(ol.children[i])
            }
            var todocount = 0;
            var donecount = 0;
            data.forEach((item,index)=>{
                if(item.done){
                    // console.log(1);
                    
                        var li = document.createElement("li")
                        li.innerHTML = "<input type='checkbox' checked='checked' > <p>"+item.title+"<a href='javascript:;' id=" + index + " >删除</a></p>"
                        ul.insertBefore(li,ul.children[0])
                        todocount++
                          
                }else {
                    var li = document.createElement("li")
                    li.innerHTML = "<input type='checkbox'  > <p>"+item.title+"<a href='javascript:;' id=" + index + " >删除</a></p>"
                    ol.insertBefore(li,ol.children[0])
                    donecount++
                }
            })
        }
       ol.addEventListener("click",function(e){
        // console.log();
        var data = getDate()
       var index =  e.target.getAttribute("id")
       data.splice(index,1);
       saveDate(data)
       draw()
        
        
        
            
        })
    </script>
</body>

</html>